﻿<%@ Page Language="C#" AutoEventWireup="true" MasterPageFile="~/Areas/CustomerAdmin/Customer.Master" CodeBehind="Default.aspx.cs" Inherits="OnlineBusinesses.Areas.CustomerAdmin.Charts.Default" %>
<asp:Content runat="server" ID="BodyContent" ContentPlaceHolderID="ContentCustomerAdmin">
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:10px;">
        <h3>Báo cáo thống kê
            <button type="button" class="btn btn-default pull-right hidden-xs hidden-sm" style="margin-right:20px;border-radius:0px;border:1px solid #ddd;padding-top:10px;" value="Back" onclick="history.go(-1);">
                <span class="fa fa-mail-reply" style="font-size:20px;"></span>
            </button>
        </h3>
    </div>
    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px">
            <script type="text/javascript">
                $(document).ready(function () {
                    var dataAll =
                    [
                        { Browser: 'Email gửi thành công', Share: 50.0 },
                        { Browser: 'Email trả về', Share: 35.0 },
                        { Browser: 'Email lỗi', Share: 15.4 }
                    ];
                    var dataResponder =
                    [
                        { Browser: 'Email gửi thành công', Share: 85.0 },
                        { Browser: 'Email trả về', Share: 5.0 },
                        { Browser: 'Email lỗi', Share: 10.0 }
                    ];
                    var dataBroadcast =
                    [
                        { Browser: 'Email gửi thành công', Share: 95.0 },
                        { Browser: 'Email trả về', Share: 5.0 },
                        { Browser: 'Email lỗi', Share: 0.0 }
                    ];
                    var dataEmail =
                    [
                        { Browser: 'Email gửi thành công', Share: 76.0 },
                        { Browser: 'Email trả về', Share: 12.0 },
                        { Browser: 'Email lỗi', Share: 12.0 }
                    ];
                    var dataChamSoc =
                    [
                        { Browser: 'Email gửi thành công', Share: 82.0 },
                        { Browser: 'Email trả về', Share: 8.0 },
                        { Browser: 'Email lỗi', Share: 10.0 }
                    ];
                    var charts = [
                        { title: 'Sơ đồ tổng', label: 'All Email', dataSource: dataAll },
                        { title: 'Autoresponder', label: 'Auto Responder', dataSource: dataResponder },
                        { title: 'Send Broadcast', label: 'Broadcast', dataSource: dataBroadcast },
                        { title: 'Email', label: 'Email', dataSource: dataEmail },
                        { title: 'Chăm sóc khách hàng', label: 'Customer', dataSource: dataChamSoc }
                    ];
                    for (var i = 0; i < charts.length; i++) {
                        var chartSettings = {
                            source: charts[i].dataSource,
                            title: '',
                            description: charts[i].title,
                            enableAnimations: true,
                            showLegend: true,
                            borderLineColor: '#dddddd',
                            showBorderLine: true,
                            padding: { left: 5, top: 5, right: 5, bottom: 5 },
                            titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                            colorScheme: 'scheme03',
                            seriesGroups: [
                                {
                                    type: 'pie',
                                    showLegend: true,
                                    enableSeriesToggle: true,
                                    series:
                                        [
                                            {
                                                dataField: 'Share',
                                                displayText: 'Browser',
                                                showLabels: true,
                                                labelRadius: 160,
                                                labelLinesEnabled: true,
                                                labelLinesAngles: true,
                                                labelsAutoRotate: false,
                                                initialAngle: 0,
                                                radius: 125,
                                                minAngle: 0,
                                                maxAngle: 180,
                                                centerOffset: 0,
                                                offsetY: 170,
                                                formatFunction: function (value, itemIdx, serieIndex, groupIndex) {
                                                    if (isNaN(value))
                                                        return value;
                                                    return value + '%';
                                                }
                                            }
                                        ]
                                }
                            ]
                        };
                        // select container and apply settings
                        var selector = '#chartContainer' + (i + 1);
                        $(selector).jqxChart(chartSettings);
                    } // for

                    $("#jqxfromdate").jqxDateTimeInput({ width: '120px', height: '32px' });
                    $("#jqxtodate").jqxDateTimeInput({ width: '120px', height: '32px' });

                    var sampleData = [{ a: 0.35, b: 14.5, c: 2.0 }];
                    var settings = {
                        title: "Kết quả gửi email",
                        description: " ",
                        padding: { left: 5, top: 5, right: 5, bottom: 5 },
                        titlePadding: { left: 0, top: 0, right: 0, bottom: 10 },
                        source: sampleData,
                        colorScheme: 'scheme03',
                        borderLineColor: '#dddddd',
                        enableAnimations: true,
                        xAxis:
                                {
                                    dataField: '',
                                    description: '',
                                    showGridLines: true,
                                    showTickMarks: true
                                },
                        seriesGroups:
                                [
                                    {
                                        type: 'column',
                                        valueAxis: {
                                            description: 'Value',
                                            logarithmicScale: true,
                                            logarithmicScaleBase: 2,
                                            unitInterval: 1,
                                            tickMarksInterval: 1,
                                            gridLinesInterval: 1,
                                            formatSettings: { decimalPlaces: 3 },
                                            horizontalTextAlignment: 'right'
                                        },
                                        series: [
                                                    { dataField: 'a', displayText: 'Tổng email mở' },
                                                    { dataField: 'b', displayText: 'Tổng email click' },
                                                    { dataField: 'c', displayText: 'Tổng email chưa mở' }
                                        ]
                                    }
                                ]
                    };
                    $('#jqxChart_result').jqxChart(settings);
                });
                </script>
                <div class="col-md-12 col-xs-12 col-sm-12 col-lg-12" style="padding:10px;">
                    <div class="col-md-2 col-xs-4 col-lg-2 col-sm-4" style="padding:5px;line-height:32px;">
                        Từ ngày : 
                    </div>
                    <div class="col-md-3 col-xs-8 col-lg-3 col-sm-8" style="padding:5px;">
                        <div id='jqxfromdate' style="float:left;"></div> 
                    </div>
                    <div class="col-md-2 col-xs-4 col-lg-2 col-sm-4" style="padding:5px;line-height:32px;">
                        Đến ngày : 
                    </div>
                    <div class="col-md-3 col-xs-8 col-lg-3 col-sm-8" style="padding:5px;">
                         <div id='jqxtodate' style="float:left;"></div>
                    </div>
                    <div class="col-md-2 col-xs-12 col-lg-2 col-sm-12" style="padding:5px;">
                        <span class="btn btn-default" style="width:100%;border-radius:0px;background:#d00;color:#fff;font-weight:bold;"><i class="fa fa-search" style="margin-right:10px;"></i> Tìm kiếm</span>
                    </div>
                </div>
                <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;">
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;">
                        <div class="col-xs-12 col-md-6 col-xs-12 col-lg-6 col-sm-12" id='chartContainer1' style="padding:5px;height:280px;"></div>
                        <div class="col-xs-12 col-md-6 col-xs-12 col-lg-6 col-sm-12" id='jqxChart_result' style="padding:5px;height:280px;"></div>
                    </div>
                    <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;margin:10px 0px;height:1px;background:#ddd;"></div>
                    
                    <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:5px;">
                        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;border:1px solid #ddd;">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;"><a href="ChartsDetails.aspx?autores" style="color:#333;text-decoration:none;"><span class="btn btn-default" style="width:100%;border-radius:0px;background:#fdfdfd;">Báo cáo Autoresponder</span></a></div>
                            <div class="col-xs-12 col-md-12 col-xs-12 col-lg-12 col-sm-12" id='chartContainer2' style="padding:5px;height:280px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:5px;">
                        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;border:1px solid #ddd;">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;"><a href="ChartsDetails.aspx?broadcast" style="color:#333;text-decoration:none;"><span class="btn btn-default" style="width:100%;border-radius:0px;background:#fdfdfd;">Báo cáo Broadcast</span></a></div>
                            <div class="col-xs-12 col-md-12 col-xs-12 col-lg-12 col-sm-12" id='chartContainer3' style="padding:5px;height:280px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:5px;">
                        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;border:1px solid #ddd;">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;"><a href="ChartsDetails.aspx?email" style="color:#333;text-decoration:none;"><span class="btn btn-default" style="width:100%;border-radius:0px;background:#fdfdfd;">Báo cáo Email</span></a></div>
                            <div class="col-xs-12 col-md-12 col-xs-12 col-lg-12 col-sm-12" id='chartContainer4' style="padding:5px;height:280px;"></div>
                        </div>
                    </div>
                    <div class="col-md-6 col-xs-12 col-lg-6 col-sm-12" style="padding:5px;">
                        <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:0px;border:1px solid #ddd;">
                            <div class="col-md-12 col-xs-12 col-lg-12 col-sm-12" style="padding:5px;"><a href="ChartsDetails.aspx?customer" style="color:#333;text-decoration:none;"><span class="btn btn-default" style="width:100%;border-radius:0px;background:#fdfdfd;">Báo cáo khách hàng</span></a></div>
                            <div class="col-xs-12 col-md-12 col-xs-12 col-lg-12 col-sm-12" id='chartContainer5' style="padding:5px;height:280px;"></div>
                        </div>
                    </div>
                </div>
        </div>
    </div>
</asp:Content>